<template>
	<view class="page">
		<view class="center_menu">
			<view class="menu_item" v-for="(item,index) in menus">
				<text>{{item.name}}</text>
				<view v-if="index==1" @click="showin" style=" flex: 1;height: 90rpx;line-height: 90rpx;">{{item.value}}</view>
				<u-input v-else="index==1" style="flex: 1;" :height="90" v-model="item.value"></u-input>

			</view>
		</view>
		<view class="button" style="height: 200upx; background: #ffffff; ">
			<u-button @click="OK()" type="error" :custom-style="{width:'360rpx'}">提交</u-button>
		</view>
		<u-calendar active-bg-color="#fa3534" btn-type="default" v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode:"date",
				menus: [{
						name: '真实姓名：',
						key: 'username',
						value: ""
					},
					{
						name: '出生年月：',
						key: 'birthdate',
						value: ""
					},
					{
						name: '身份证号：',
						key: 'IDnumber',
						value: ""
					},
					{
						name: '联系电话：',
						key: 'phone',
						value: ""
					},
					{
						name: '从事行业：',
						key: 'occupation',
						value: ""
					},
					{
						name: '工作单位：',
						key: 'company',
						value: ""
					},
					{
						name: '职称：',
						key: 'othername',
						value: ""
					},
					{
						name: '职务：',
						key: 'work',
						value: ""
					}, {
						name: '简介：',
						key: 'log',
						value: ""
					}

				],
				
			}
		},
		methods: {
			OK: function() {//提交按钮
				console.log(this.menus);
			},
			showin: function() {
				this.show=true;
			},
			change(e) {
				this.menus[1].value=e.year+"."+e.month+"."+e.day
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		background: #f5f5f5;
	}

	.center_menu {
		width: 100%;
		display: inline-block;

		.menu_item {
			display: flex;
			font-size: 28upx;
			letter-spacing: 1px;
			padding: 0upx 4%;
			background: #FEFEFE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #EFEFEF;
			transition: all 0.1s;

			&:active {
				background: #F6F6F6 !important;
			}

			&:nth-of-type(5) {
				margin-top: 10px;
			}

			&:nth-of-type(7) {
				margin-top: 10px;
			}
		}
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
